<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Tabs, type TabsValueChangeDetails } from '@ark-ui/vue/tabs';
import { useRouter } from 'vue-router';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import { useTitleForClient } from '@/home/hooks/browser';
import { useI18n } from 'vue-i18n';
import Journalism from './components/Journalism.vue';
import Repository from './components/Repository.vue';
import Organization from './components/Organization.vue';

const DEFAULT_TYPE = 'journalism';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },

  type: {
    type: String,
    default: '',
  },
});

const router = useRouter();
const { setTitle } = useTitleForClient();
const { t } = useI18n();

const tagType = ref(props.type || DEFAULT_TYPE);

const generateTitle = (title: string) => `${title} - ${t('home.tag.index.title')}`;

const { $fetch } = useFetch();
const { data: detail } = useAsyncData(
  'tag:detail',
  () => $fetch('/esInfoProduct/getProductTypeCounts', {
    method: 'post',
    data: {
      searchLabel: props.id,
    },
  }),
  {
    watch: [() => props.id],
    onAfterHandle({ handleSuccess, serverContext, data }) {
      if (serverContext) {
        if (handleSuccess && data?.labelValue?.labelName) {
          serverContext.title = generateTitle(data.labelValue.labelName);
        }
        else {
          // 如果请求出错直接服务器重定向到 404 页面
          serverContext.redirect = '/404';
        }
      }
      else {
        if (handleSuccess && data?.labelValue?.labelName) {
          setTitle(generateTitle(data.labelValue.labelName));
        }
        else {
          router.replace('/404');
        }
      }
    },
  },
);

watch(() => props.type, (type) => {
  tagType.value = type || DEFAULT_TYPE;
});

const handleValueChange = (details: TabsValueChangeDetails) => {
  router.push(`/tag/${props.id}/${details.value}`);
}
</script>

<template>
  <main class="page-tag">
    <section class="bg-white py-48">
      <div class="container">
        <h1 class="break-anywhere text-center text-balance text-26 text-[#292929] font-semibold leading-40">
          <template v-if="detail?.labelValue?.labelName">
            #{{ detail?.labelValue?.labelName }}
          </template>
          <template v-else>
            &nbsp;
          </template>
        </h1>
      </div>
    </section>

    <Tabs.Root v-model="tagType" @value-change="handleValueChange">
      <Tabs.List class="relative bg-white pb-10">
        <div class="mx-auto max-w-900 flex items-center gap-x-32 *:bg-transparent *:text-16 *:text-[rgba(173,173,173,0.95)] *:leading-32 data-[selected]:*:text-[#292929] focus-visible:*:outline-unset">
          <Tabs.Trigger value="journalism">{{ $t('home.tag.journalism.title') }}({{ detail?.mapCount?.journalism ?? 0 }})</Tabs.Trigger>
          <Tabs.Trigger value="repository">{{ $t('home.tag.repository.title') }}({{ detail?.mapCount?.repository ?? 0 }})</Tabs.Trigger>
          <Tabs.Trigger value="organization">{{ $t('home.tag.organization.title') }}({{ detail?.mapCount?.organization ?? 0 }})</Tabs.Trigger>
        </div>
        <Tabs.Indicator class="bottom-0 h-2 w-[var(--width)] rounded-1 bg-[#292929]" />
      </Tabs.List>
    </Tabs.Root>

    <section class="mx-auto mt-24 max-w-900">
      <KeepAlive>
        <Journalism type="tag" :query="props.id" v-if="tagType === 'journalism'" />
        <Repository type="tag" :query="props.id" v-else-if="tagType === 'repository'" />
        <Organization type="tag" :query="props.id" v-else-if="tagType === 'organization'" />
      </KeepAlive>
    </section>
  </main>
</template>

<style lang="scss" scoped>
</style>
